<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加新药</title>
    <script src="../static/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <style>
        .form-inline{
            text-align: center;
            margin-top: 30px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<form class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" id="name" placeholder="药品名称">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="category" placeholder="分类">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="spellName" placeholder="快捷提示">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="specs" placeholder="规格">
    </div>
    <button type="submit" class="btn btn-default" id="Save" >添加</button>
</form>
<table class="table" id="listTable">
    <thead>
    <tr>
        <th>药品名称</th>
        <th>分类</th>
        <th>快捷提示</th>
        <th>规格</th>
    </tr>
    </thead>
    <tbody id="findAll">

    </tbody>
</table>
<script>

    $(function () {
        findAllDrugs();
        //给添加按钮绑定点击事件
        $("#Save").on("click",AddNewDrug);
    });


    function AddNewDrug() {
        $.ajax({
            type:"get",
            url : "http://127.0.0.1:8080/insertNewDrug",
            async:true,
            data:{
                name:$("#name").val(),
                spellName:$("#spellName").val(),
                category:$("#category").val(),
                specs:$("#specs").val()
            },
            success : function(data){
                console.log(data);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }
    function findAllDrugs(){
        //请求参数
        var list = {};
        var tbody=$("#findAll");
        //
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://127.0.0.1:8080/listDrugs",
            //数据，json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
                var str="";
                for (var i=0;i<result.length;i++){
                    str += ("<tr>" +
                        "<td>" + result[i].name + "</td>" +
                        "<td>" + result[i].spellName + "</td>" +
                        "<td>" + result[i].category + "</td>" +
                        "<td>" + result[i].specs + "</td>" +
                        "</tr>");
                }


                tbody.append(str);
                console.log(str);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }



</script>
</body>
</html>